import { useRequest } from "ahooks";
import React, { useMemo, useState, useCallback } from "react";
import { Table, Image } from "antd";
import { getUserListApi } from "@/api/user";

const UserListConternt = () => {
  // 序号跟着变
  const [current, setCurrernt] = useState(1);
  const [pageSize, setPageSize] = useState(10);
  const { data, loading } = useRequest(getUserListApi);
  console.log(data, "请求数据");
  const columns = useMemo(
    () => [
      {
        title: "序号",
        render: (_, record, index) => (current - 1) * pageSize + index + 1,
      },
      {
        title: "头像",
        dataIndex: "avatar",
        key: "avatar",
        width: 150,
        align: "center",
        render: (text) => <Image width={100} src={text} />,
      },
      { title: "昵称", dataIndex: "nickname", key: "nickname" },
      { title: "电话号码", dataIndex: "tel", key: "tel" },
      {
        title: "性别",
        dataIndex: "sex",
        key: "sex",
        render: (text) => (text === -1 ? "女士" : "男士"),
      },
      { title: "邮政编码", key: "telcode", dataIndex: "telcode" },
    ],
    [current, pageSize]
  );
  const handlePageChange = useCallback((page, size) => {
    console.log("进来参数", page, size);
    setCurrernt(page);
    setPageSize(size);
  }, []);

  return (
    <Table
      loading={loading}
      pagination={{ onChange: handlePageChange }}
      dataSource={data}
      columns={columns}
      rowKey="userid"
    ></Table>
  );
};
export default UserListConternt;
